<template>
    <el-select
            v-model="selected"
            :placeholder="placeholder"
            :remote-method="search"
            :loading="loading"
            @change="v=>$emit('input',v)"
            clearable
            remote
            filterable>
        <el-option v-for="anchor in anchors"
                   :key="anchor.id"
                   :value="anchor"
                   :label="anchor.name">
            <span class="left">{{anchor.platform.name}}</span>
            <span class="right">{{anchor.name}}</span>
        </el-option>
    </el-select>
</template>

<script>
    import _ from 'lodash';

    let unwatch;
    export default {
        name: "project_search_anchor",
        props: {
            placeholder: {type: String, default: '主播名称 / 房间号'},
            value: {default: null,},
        },
        data() {
            return {
                loading: false,
                anchors: [],
                selected: '',
            };
        },
        methods: {
            search(str) {
                if (_.isEmpty(str))
                    return;
                this.loading = true;
                this.$http.get('/api/xiaohulu/anchors', {params: {search: str}}).then(res => {
                    this.loading = false;
                    this.anchors = res.data.list;
                });
            },
            clear() {
                // console.log('clear');
                this.anchors = [];
                this.selected = null;
            },
            setDefaultValue(anchor) {
                this.anchors.length = 0;
                this.selected = anchor;
                this.anchors.push(anchor);
            }
        },
        watch: {
            value(val) {
                this.anchors.length = 0;
                // console.log('watch value', val);
                if (!val) return;
                this.selected = val;
                this.anchors.push(val);
            },
        },
        mounted() {
            this.anchors.length = 0;
            // console.log('mounted value', this.value);
            if (!this.value) return;
            this.selected = this.value;
            this.anchors.push(this.value);
        },
    }
</script>

<style scoped>
</style>